<template>
  <div class='checkitemconfig-container'>
    <el-row>

      <el-col :span="24">
        <el-col :span="12">
          <el-col :span="24">
            <el-col :span="4">
              <el-button type="primary"
                         @click="onAdd"
                         class="el-icon-plus">添加</el-button>
            </el-col>
            <el-col :span="20">
              &nbsp;
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="12">

          <el-form :inline="true"
                   :model="form"
                   class="float-right">
            <el-col :span="24">
              <el-col :span="10"
                      class="col-10-style">
                <el-select v-model="requestParam.major_type"
                           placeholder="请选择"
                           @change="onSelect">
                  <el-option v-for="item in majorTypeCodeList"
                             :key="item.value"
                             :label="item.name"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="11"
                      class="project-style">
                <el-input v-model="requestParam.major_name"
                          placeholder="请输入体系名称"
                          @keyup.enter.native="getData">
                </el-input>
              </el-col>
              <el-col :span="3"
                      class="el-span-style">
                <el-button type="primary"
                           class="el-butt-style"
                           @click="getMajorList">查询</el-button>
              </el-col>

            </el-col>

          </el-form>
        </el-col>
      </el-col>

      <el-col :span="24"
              class="el-24-style">
        <el-table :data='majorListData.data'
                  :header-cell-style="{background:'#f5f5f5'}"
                  border>

          <el-table-column type="index"
                           label='序号'
                           align='center'
                           width="50"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='major_name'
                           label='体系名称'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='major_type_name'
                           label='专业类型'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='check_num'
                           label='检查项数目'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='create_user_name'
                           label='操作人员'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='updated_at'
                           label='最后操作时间'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='status'
                           label='当前状态'
                           align='center'
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.isPublish?'已发布':'未发布'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop='release_time'
                           label='发布时间'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作"
                           width="185px"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text"
                         @click="onSet(scope.row)">设置
              </el-button>
              <el-button type="text"
                         @click="onEdit(scope.row)">编辑
              </el-button>
              <el-button type="text"
                         @click="onDelete(scope.row)">删除</el-button>
              <el-button type="text"
                         v-if="!scope.row.isPublish"
                         @click="onRevert(scope.row)">发布</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination @current-change='handlePageChange'
                       :current-page='requestParam.page'
                       :page-size='requestParam.per_page'
                       :page-sizes="[15,20,30,40]"
                       layout='total,sizes,prev, pager, next, jumper'
                       background
                       :total='checkObje.total_count'
                       align='center'>
        </el-pagination> -->
      </el-col>
    </el-row>
    <!-- 新增弹框 -->
    <el-dialog :title="judge=='create'?'添加体系':'编辑体系'"
               width="40%"
               :visible.sync="dialogFormVisible">
      <el-form :model="addForm"
               ref="addForm"
               :rules="rules"
               label-width="80px"
               class="add-form">
        <el-form-item label="体系名称"
                      prop="major_name">
          <el-input v-model="addForm.major_name"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="专业类型"
                      prop="major_type"
                      v-show="judge=='create'?true:false">
          <el-select v-model="addForm.major_type"
                     placeholder="请选择">
            <el-option v-for="item in majorTypeCodeList"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>
      </el-form>
      <div class="btn-container">
        <el-button @click="onBack"
                   class="cancel-btn">取 消</el-button>
        <el-button type="success"
                   @click="onSave('addForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { checkItemConfigApi } from '@/services/SystemSetting'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  data () {
    return {
      //  专业类型标准码列表
      majorTypeCodeList: [

      ],
      value: '0',
      addForm: {
        major_name: '',
        major_type: ''
      },
      dialogFormVisible: false,
      form: {
        address: []
      },
      addressOptions: [],
      // 请求检测体系列表参数
      requestParam: {
        major_name: '',
        major_type: ''
      },

      // 检测体系列表
      majorListData: {
        data: [],
        page: 1,
        per_page: 15
      },
      checkObje: {
        total_page: 0,
        total_count: 0
      },
      judge: 'create', // 判断是新增还是编辑
      rules: {
        major_name: [{ required: true, message: '体系名称不能为空', trigger: 'blur' }],
        major_type: [{ required: true, message: '专业类型不能为空', trigger: 'blur' }, { required: true, message: '专业类型不能为空', trigger: 'change' }]
      }

    }
  },
  methods: {
    // 添加触发的事件
    onAdd () {
      this.judge = 'create'

      this.dialogFormVisible = true
      // this.$refs.addForm.resetFields()
      this.addForm = {}
    },
    // 添加、修改-----保存时触发的事件
    onSave (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          if (this.judge === 'create') {
            this.createMajor()
          } else if (this.judge === 'update') {
            this.updateMajor()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 新增检测体系
    createMajor () {
      checkItemConfigApi.createMajor({
        data: this.addForm
      }).then(res => {
        // console.log(res, 'create major')
        if (res.code === 0) {
          this.$message.success('新增检测体系成功')
          this.dialogFormVisible = false
          this.getMajorList()
        }
      }, err => {
        console.log(err)
      })
    },
    // 编辑检测体系
    updateMajor () {
      this.addForm.id = this.addForm.major_id
      checkItemConfigApi.updateMajor({
        data: this.addForm
      }).then(res => {
        //console.log(res, 'update major')
        if (res.code === 0) {
          this.$message.success('修改检测体系成功')
          this.dialogFormVisible = false
          this.getMajorList()
        }
      }, err => {
        console.log(err)
      })
    },
    // 添加、修改------取消时触发的事件
    onBack () {
      this.dialogFormVisible = false
    },
    onSelect (val) {
      // console.log('val=', val);
    },
    getData () {

    },
    // 点击设置时触发事件
    onSet (row) {
      this.$router.push({
        path: '/configure',
        query: {
          id: row.major_id,
          type: row.major_type
        }
      })
    },
    // 点击编辑时触发事件
    onEdit (row) {
      this.judge = 'update'
      this.dialogFormVisible = true
      this.addForm = JSON.parse(JSON.stringify(row))
    },
    // 点击删除时触发事件
    onDelete (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteMajor(row)
      }).catch(() => {

      })
    },
    deleteMajor (row) {
      let deleteData = {
        id: row.major_id,
        major_name: row.major_name
      }
      checkItemConfigApi.deleteMajor({
        data: deleteData
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('删除检测体系成功')
          this.getMajorList()
        }
      })
    },
    // 点击发布触发事件
    onRevert (row) {
      // this.$confirm('是否确定发布该检测体系?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.revertMajor(row)
      // }).catch(() => {

      // })
    },
    revertMajor (row) {
      checkItemConfigApi.revertMajor({
        data: {
          id: row.major_id
        }
      }).then(res => {
        // console.log(res, 'revert major')
        if (res.code === 0) {
          this.$message.success('发布成功')
          this.getMajorList()
        }
      })
    },
    handlePageChange (page) {
      this.requestParam.page = page
    },
    // 获取列表数据
    getMajorList () {
      checkItemConfigApi.getMajorList({
        params: this.requestParam
      }).then(res => {
        //console.log(res, 'get major list')
        if (res.code === 0) {
          this.majorListData = res.data
          this.majorListData.data.map((item) => {
            item.major_type_name = this.getMajorTypeName(item.major_type)
            item.isPublish = item.release_time === item.updated_at
          })
        }
      })
    },
    // 获取专业类型标准码
    getMajorTypeCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'major_type'
        }
      }).then(res => {
        if (res.code === 0 && res.data.list) {
          this.majorTypeCodeList = res.data.list
        }
      }, err => {
        console.log(err)
      })
    },
    // 根据专业类型标准码value获取name
    getMajorTypeName (value) {
      let name = ''
      this.majorTypeCodeList.map((item) => {
        if (item.value === value) name = item.name
      })
      return name
    }
  },
  async created () {
    // if (window.sessionStorage.getItem('access_token')) {
    if (window.localStorage.getItem('access_token')) {
      await this.getMajorTypeCode()
      this.getMajorList()
    }

  },
  mounted () {

  }
}
</script>
<style scoped lang='scss'>
.checkitemconfig-container {
  background: white !important;
  padding: 20px;
}
.btn-container {
  text-align: center;
  .cancel-btn {
    margin-right: 10px;
  }
}
/deep/ .add-form .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
.project-style {
  padding-right: 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.col-10-style {
  padding-right: 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.float-right {
  margin-right: 0px;
  padding-right: 0px;
}
.el-butt-style {
  width: 100% !important;
}
.el-span-style {
  text-align: right;
}
.el-24-style {
  margin-top: 20px;
}
</style>
